<template>
    <view :style="'direction:' + $t('dir')" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'">
        <navbar :title="$t(type)" :back="true" bgLayer="linear-gradient(#fff, #fff)" navbarBg="linear-gradient(#fff, #fff)" />

        <view class="main">
            <view class="bg-white full-width" style="position: sticky; z-index: 999" :style="{ top: headerArea.title_height + headerArea.menuTop + 'px' }">
                <view class="center row items-center" style="background: #fafafa; border-radius: 68rpx; width: 90%; margin: 0 5%; border: 1px solid #f2f2f2; padding-top: 22rpx; padding-bottom: 22rpx">
                    <view class="row flex-center button" style="width: 100rpx; margin: 0 30rpx" :style="$t('dir') == 'rtl' ? 'border-left: 1rpx solid #ccc;' : 'border-right: 1rpx solid #ccc;'" @click="kwClear">
                        <u-icon name="search" size="20" />
                    </view>
                    <view style="flex: 1; font-size: 22rpx; color: #d8d8d8" :style="$t('dir') == 'rtl' ? 'text-align:right !important' : 'text-align:left !important'">
                        <u--input type="text" inputAlign="center" :customStyle="{ direction: inputDir }" @change="handleInput" :maxlength="32" :placeholder="$t('qingshuruxiaoqumingcheng')" border="none" v-model="kw" placeholderStyle="text-align:center" fontSize="22rpx" clearable @clear="kw = ''" @confirm="kwClear()"></u--input>
                    </view>
                </view>

                <!-- 条件查询 -->
                <view class="d-flex justify-between items-center pa-md">
                    <view class="row flex-center button" style="border-radius: 18px; min-width: 100rpx" @click="filterClick(3)">
                        <view>{{ $t('quyu1') }}</view>
                        <image src="/static/images/data/down.png" style="width: 14rpx; height: 8rpx; opacity: 0.2" class="mx-xs" />
                    </view>
                    <view v-for="(item, index) in filterList" :key="index" class="row flex-center button" style="border-radius: 18px; min-width: 100rpx" @click="filterClick(index)">
                        <view v-if="index == 0 && selectedPrice.name != '不限'" class="app-color text-nowrap" style="max-width: 22vw">{{ selectedPrice['name' + $t('k')] }}</view>
                        <view v-else-if="index == 1 && bedroom.val" class="app-color text-nowrap" style="max-width: 22vw">{{ bedroom['name' + $t('k')] }}</view>
                        <view v-else-if="index == 2 && fitment.val" class="app-color text-nowrap" style="max-width: 22vw">{{ fitment['label'] }}</view>
                        <view v-else>{{ item['name' + $t('k')] }}</view>
                        <image src="/static/images/data/down.png" style="width: 14rpx; height: 8rpx; opacity: 0.2" class="mx-xs" />
                    </view>
                </view>
            </view>

            <view class="d-flex flex-wrap items-center justify-between pa-md pt-xs">
                <house-row v-for="(item, i) in houses" :item="item" :key="i" :type="type" />
            </view>
            <u-empty v-if="houses && houses.length == 0 && loadmoreStatus != 'loading'" mode="list" icon="/static/images/empty.png" :text="$t('no_content')" style="padding-top: 250rpx" />
            <u-loadmore v-else :status="loadmoreStatus" :loading-text="$t('loadingText')" loadmore-text="." nomoreText="." :isDot="true" :line="loadmoreStatus == 'nomore'" color="#bfbfbf" />
        </view>

        <!-- 条件查询 -->
        <u-popup :show="filterShow" mode="top" @close="filterShow = false" round="26">
            <view style="margin-top: 70px"></view>
            <view class="row justify-between items-center mt-md pa-md" style="border-bottom: 1px solid #f0f0f0">
                <view class="row flex-center button" :class="filterActive == 3 ? 'app-color' : ''" @click="filterClick(3)">
                    <view>{{ $t('quyu1') }}</view>
                    <image src="/static/images/data/down.png" style="width: 14rpx; height: 8rpx; opacity: 0.2" class="mx-xs" />
                </view>
                <view v-for="(item, index) in filterList" :key="index" class="row flex-center button" :class="filterActive == index ? 'app-color' : ''" @click="filterClick(index)">
                    <view v-if="index == 0 && selectedPrice.name != '不限'" class="text-nowrap" style="max-width: 22vw">{{ selectedPrice['name' + $t('k')] }}</view>
                    <view v-else-if="index == 1 && bedroom.val" class="text-nowrap" style="max-width: 22vw">{{ bedroom['name' + $t('k')] }}</view>
                    <view v-else-if="index == 2 && fitment.val" class="text-nowrap" style="max-width: 22vw">{{ fitment['label'] }}</view>
                    <view v-else>{{ item['name' + $t('k')] }}</view>
                    <image src="/static/images/data/down.png" style="width: 14rpx; height: 8rpx; opacity: 0.2" class="mx-xs" />
                </view>
            </view>
            <view v-if="filterActive == 0" class="mt-lg">
                <view style="padding: 0 160rpx">
                    <view v-for="(price, i) in type == 'zufang' ? priceList1 : priceList" :key="i" class="py-sm text-center button" style="border-bottom: 1px solid #f5f5f5" :style="selectedPrice.maxPrice == price.maxPrice ? 'color:#42D3AD' : ''" @click="selectedPrice = price">{{ price['name' + $t('k')] }}</view>
                </view>

                <view class="mt-lg row items-center px-lg mb-sm">
                    <view>{{ $t('jiage') }}</view>
                    <view class="mx-sm">
                        <u--input :placeholder="$t('zuidijia')" border="surround" type="number" v-model="selectedPrice.minPrice" :customStyle="{ background: 'white' }" />
                    </view>
                    -
                    <view class="mx-sm">
                        <u--input :placeholder="$t('zuigaojia')" border="surround" type="number" v-model="selectedPrice.maxPrice" :customStyle="{ background: 'white' }" />
                    </view>
                </view>
            </view>

            <view v-if="filterActive == 1" class="row items-center flex-wrap px-sm">
                <view class="full-width">
                    <view class="cate-main">
                        <scroll-view class="u-tab-view" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'" :scroll-y="true" :scroll-with-animation="true">
                            <view v-for="(item, index) in categories" :key="index" class="u-tab-item" :class="[categorySelected.id == item.id ? 'u-tab-item-active' : '']" :data-current="index" @tap.stop="swichMenu(item)">
                                <text>{{ item['name' + $t('k')] }}</text>
                            </view>
                        </scroll-view>
                        <scroll-view class="goods-container" :scroll-y="true" :scroll-with-animation="true" style="" :scroll-into-view="intoView">
                            <view class="px-sm pt-md mb-sm fw-bold" id="intoView1">{{ $t('huxing') }}</view>
                            <view class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in huxingList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="bedroom.val == h.val ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="bedroom = h">{{ h['name' + $t('k')] }}</view>
                            </view>
                            <view class="px-sm pt-md mb-sm fw-bold" id="intoView2">{{ $t('mianji') }}</view>
                            <view class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in pingFangList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="pingFang.maxVal == h.maxVal ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="pingFang = h">{{ h['name' + $t('k')] }}</view>
                            </view>
                            <view class="px-sm pt-md mb-sm fw-bold" id="intoView3">{{ $t('weishengjian') }}</view>
                            <view class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in toiletList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="toiletObj.val == h.val ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="toiletObj = h">{{ h['name' + $t('k')] }}</view>
                            </view>
                            <view class="px-sm pt-md mb-sm fw-bold" id="intoView4">{{ $t('chaoxiang') }}</view>
                            <view class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in fangXiangList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="direction.val == h.val ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="direction = h">{{ h.label }}</view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </view>

            <view v-if="filterActive == 2" class="row items-center flex-wrap px-sm">
                <view class="full-width">
                    <view class="cate-main">
                        <scroll-view class="u-tab-view" :class="$t('dir') == 'rtl' ? 'rtl' : 'ltr'" :scroll-y="true" :scroll-with-animation="true">
                            <template v-for="(item, index) in categories1">
                                <view :key="index" v-if="type == 'zufang' ? (item.type != 'maifang' ? true : false) : true" class="u-tab-item" :class="[categorySelected1.id == item.id ? 'u-tab-item-active' : '']" :data-current="index" @tap.stop="swichMenu1(item)">
                                    <text>{{ item['name' + $t('k')] }}</text>
                                </view>
                            </template>
                        </scroll-view>
                        <scroll-view class="goods-container" :scroll-y="true" :scroll-with-animation="true" style="" :scroll-into-view="intoViewc">
                            <!--  房屋类型-->
                            <view class="px-sm pt-md mb-sm fw-bold" id="intoViewc1">{{ categories1[0]['name' + $t('k')] }}</view>
                            <view class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in houseTypeList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="houseTypeObj.val == h.val ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="houseTypeObj = h">{{ h['label'] }}</view>
                            </view>
                            <!--  房龄-->
                            <view v-if="type != 'zufang'" class="px-sm pt-md mb-sm fw-bold" id="intoViewc2">{{ categories1[1]['name' + $t('k')] }}</view>
                            <view v-if="type != 'zufang'" class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in nianLingList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="nianLingObj.maxVal == h.maxVal ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="nianLingObj = h">{{ h['name' + $t('k')] }}</view>
                            </view>
                            <!-- 装修 -->
                            <view class="px-sm pt-md mb-sm fw-bold" id="intoViewc3">{{ categories1[2]['name' + $t('k')] }}</view>
                            <view class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in zhuangXiuList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="fitment.val == h.val ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="fitment = h">{{ h['label'] }}</view>
                            </view>
                            <!-- 首付 -->
                            <view v-if="type != 'zufang'" class="px-sm pt-md mb-sm fw-bold" id="intoViewc4">{{ categories1[3]['name' + $t('k')] }}</view>
                            <view v-if="type != 'zufang'" class="mt-sm px-sm pb-sm">
                                <!-- <view class="px-sm fs-sm">{{ categories1[3]['name' + $t('k')] }}</view> -->
                                <view class="row items-center">
                                    <view class="mx-xs">
                                        <u--input :placeholder="$t('zuidijia')" border="surround" type="number" v-model="advance_payment.minVal" :customStyle="{ background: 'white' }" />
                                    </view>
                                    -
                                    <view class="mx-xs">
                                        <u--input :placeholder="$t('zuigaojia')" border="surround" type="number" v-model="advance_payment.maxVal" :customStyle="{ background: 'white' }" />
                                    </view>
                                </view>
                            </view>
                            <view v-if="type != 'zufang'" class="d-flex flex-wrap items-center mx-xs mb-xs">
                                <view v-for="(h, i) in shouFuList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="advance_payment.maxVal === h.maxVal ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="advance_payment = h">{{ h['name' + $t('k')] }}</view>
                            </view>
                            <!-- 楼层 -->
                            <view class="px-sm pt-md mb-sm fw-bold" id="intoViewc5">{{ categories1[4]['name' + $t('k')] }}</view>
                            <view class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in layer_levelList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="layer_level.val == h.val ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="layer_level = h">{{ h['name' + $t('k')] }}</view>
                            </view>
                            <!-- 佣金 -->
                            <view v-if="type != 'zufang'" class="px-sm pt-md mb-sm fw-bold" id="intoViewc6">{{ categories1[5]['name' + $t('k')] }}</view>
                            <view v-if="type != 'zufang'" class="d-flex flex-wrap items-center mx-xs mb-md">
                                <view v-for="(h, i) in commissionList" :key="i" class="py-xs px-sm text-center mx-xs my-sm" style="border-radius: 8px" :style="commission.maxVal == h.maxVal ? 'background:#E3F5F0;color:#42D3AD' : 'background:#FAFAFA'" @click="commission = h">{{ h['name' + $t('k')] }}</view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </view>

            <view v-if="filterActive == 3" class="px-sm">
                <view v-if="selectedRegion.code" class="row">
                    <view style="height: 50vh; overflow-y: scroll" class="flex-1 mr-sm">
                        <view v-if="disLoading" class="d-flex flex-center bg-white" style="height: 60%">
                            <u-loading-icon mode="circle" style="width: 18vw; height: 18vw" size="50" color="var(--app-color)" bold></u-loading-icon>
                        </view>
                        <view v-for="(item, i) in disList" :key="i" class="text-nowrap" style="border-bottom: 1px solid #f0f0f0; padding: 20rpx 16rpx" :class="disObj.code == item.code ? 'app-color' : ''" @click="disClick(item)"> {{ item['name' + $t('k')] ? item['name' + $t('k')] : item['name'] || item['name_ug'] }}</view>
                    </view>
                    <view v-if="townLoading || townList.length > 0" style="height: 50vh; overflow-y: scroll; border-right: 1px solid #f0f0f0; width: 58%" class="mr-sm">
                        <view v-if="townLoading" class="d-flex flex-center bg-white" style="height: 60%">
                            <u-loading-icon mode="circle" style="width: 18vw; height: 18vw" size="50" color="var(--app-color)" bold></u-loading-icon>
                        </view>
                        <view v-if="!townLoading">
                            <view v-for="(item, i) in townList" :key="i" class="row items-center justify-between" style="border-bottom: 1px solid #f0f0f0; padding: 20rpx 16rpx" @click="townClick(item)">
                                <view class="text-nowrap" :class="townCodes.includes(item.code) ? 'app-color' : ''"> {{ item['name' + $t('k')] ? item['name' + $t('k')] : item['name'] || item['name_ug'] }}</view>
                                <view style="width: 30rpx; height: 30rpx" :style="townCodes.includes(item.code) ? 'border:1px solid var(--app-color)' : 'border:1px solid #d4d4d4'" class="row flex-center">
                                    <u-icon name="checkbox-mark" size="20" v-if="townCodes.includes(item.code)" color="var(--app-color)" class="mx-xs"></u-icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view v-else>
                    <view class="text-center py-xl my-xs app-color" @click="$tools.goTo('/pages/select-city/index')">
                        <text style="border-bottom: 1px solid var(--app-color)">{{ $t('qingshuanzechengshi') }}</text>
                    </view>
                </view>
            </view>

            <view class="p-relative text-center py-sm" style="border-top: 1px solid #f0f0f0">
                <view class="row flex-center dir-ltr">
                    <view class="text-primary d-inline-block button mx-sm" style="border-radius: 24px; font-size: 20px; padding: 16rpx 0; width: 26%; background: #f6f6f6" @click="_clear()">{{ $t('qingkong') }}</view>
                    <view class="app-bg text-white d-inline-block button mx-sm" style="border-radius: 24px; font-size: 20px; padding: 16rpx 0; width: 40%" @click="_search()">{{ $t('search') }}</view>
                </view>
                <view class="p-absolute" style="left: 26px; top: 50%; transform: translateY(-50%)">
                    <u-icon @click="filterShow = false" name="close" size="18px" color="#A4A4A4" bold />
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
export default {
    data() {
        const year = new Date().getFullYear()
        return {
            loadmoreStatus: 'loadmore',
            disLoading: false,
            townLoading: false,
            categories: [
                {
                    id: 1,
                    name: '户型',
                    name_ug: 'ئۆي شەكلى',
                },
                {
                    id: 2,
                    name: '面积',
                    name_ug: 'ئۆي كۆلىمى',
                },
                {
                    id: 3,
                    name: '卫生间',
                    name_ug: 'ھاجەتخانا',
                },
                {
                    id: 4,
                    name: '朝向',
                    name_ug: 'يۆنىلىشى',
                },
            ],
            categorySelected: {
                id: 1,
                name: '户型',
                name_ug: 'ئۆي شەكلى',
            },
            categories1: [
                { id: 1, name: '房屋类型', name_ug: 'ئۆي تۈرى' },
                { id: 2, name: '房龄', name_ug: 'ئۆي يىشى', type: 'maifang' },
                { id: 3, name: '装修', name_ug: 'بىزىلىشى' },
                { id: 4, name: '首付', name_ug: 'ئالدىن تۆلەيدىغان پۇلى', type: 'maifang' },
                { id: 5, name: '层', name_ug: 'قەۋەت' },
                { id: 6, name: '佣金', name_ug: 'مۇلازىمەت ھەققى', type: 'maifang' },
            ],
            categorySelected1: {
                id: 1,
                name: '房屋类型',
                name_ug: 'ئۆي تۈرى',
            },
            selectedRegion: { city: '', region: '', province: '', village: '', parent_code: '' },
            disObj: { code: '' },
            townCodes: [],
            filterShow: false,
            type: '',
            houses: [],

            houseTypeList: [
                { label: this.$t('buxian'), val: '' },
                { label: this.$t('shangpinfang'), val: 9 },
                { label: this.$t('putongzhuzhai'), val: 1 },
                { label: this.$t('gongyu'), val: 2 },
                { label: this.$t('bieshu'), val: 3 },
                { label: this.$t('pingfang'), val: 4 },
                { label: this.$t('shangzhulou'), val: 5 },
                { label: this.$t('shangpu'), val: 6 },
                { label: this.$t('bangongshi'), val: 7 },
                { label: this.$t('qita'), val: 8 },
            ],
            houseTypeObj: { label: this.$t('buxian'), val: '' },

            // cengList: [
            //     { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },
            //     { name: '底楼', name_ug: 'تۆۋەن قەۋەت', val: '' },
            // ],
            // cengObj: { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },

            nianLingList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' },
                { name: '2年内', name_ug: '2يىل ئىچىدىكى', minVal: year - 2, maxVal: year },
                { name: '2年至5年', name_ug: '2يىلدىن 5يىلغىچە', minVal: year - 5, maxVal: year - 2 },
                { name: '5年至10年', name_ug: '5يىلدىن 10يىلغىچە', minVal: year - 10, maxVal: year - 5 },
                { name: '10年至15年', name_ug: '10يىلدىن 15يىلغىچە', minVal: year - 15, maxVal: year - 10 },
                { name: '15年至20年', name_ug: '15يىلدىن 20يىلغىچە', minVal: year - 20, maxVal: year - 15 },
                { name: '20年以上', name_ug: '20يىلدىن يۇقىرى', minVal: 1960, maxVal: year - 20 },
            ],
            nianLingObj: { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' },

            filterList: [
                { name: '价格', name_ug: 'باھاسى', dot: true },
                { name: '户型', name_ug: 'ئۆي شەكلى', dot: true },
                { name: '更多', name_ug: 'باشقىلار', dot: true },
            ],
            filterActive: '',

            priceList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', maxPrice: '', minPrice: '' },
                { name: '40万以下', name_ug: '400مىڭدىن تۆۋەن', maxPrice: 400000, minPrice: 0 },
                { name: '40万至50万', name_ug: '400مىڭدىن 500مىڭغىچە', maxPrice: 500000, minPrice: 400000 },
                { name: '50万至60万', name_ug: '500مىڭدىن 600مىڭغىچە', maxPrice: 600000, minPrice: 500000 },
                { name: '60万至70万', name_ug: '600مىڭدىن 700مىڭغىچە', maxPrice: 700000, minPrice: 600000 },
                { name: '70万至80万', name_ug: '700مىڭدىن 800مىڭغىچە', maxPrice: 800000, minPrice: 700000 },
                { name: '80万至100万', name_ug: '800مىڭدىن 1مىليونغىچە', maxPrice: 1000000, minPrice: 800000 },
                { name: '100万至120万', name_ug: '1مىليوندىن 1مىليون 200مىڭغىچە', maxPrice: 1200000, minPrice: 1000000 },
                { name: '120万至150万', name_ug: '1مىليون 200مىڭدىن 1مىليون 500مىڭغىچە', maxPrice: 1500000, minPrice: 1200000 },
                { name: '150万以上', name_ug: '1مىليون 500مىڭدىن يۇقىرى', maxPrice: 99999999999, minPrice: 1500000 },
            ],
            priceList1: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', maxPrice: '', minPrice: '' },
                { name: '1000以下', name_ug: '1000 يۈەندىن تۆۋەن', maxPrice: 1000, minPrice: 0 },
                { name: '1000至1500元', name_ug: '1000يۈەندىن 1500يۈەنگىچە', maxPrice: 1500, minPrice: 1000 },
                { name: '1500至2000元', name_ug: '1500يۈەندىن 2000يۈەنگىچە', maxPrice: 2000, minPrice: 1500 },
                { name: '2000至2500元', name_ug: '2000يۈەندىن 2500يۈەنگىچە', maxPrice: 2500, minPrice: 2000 },
                { name: '2500至3000元', name_ug: '2500يۈەندىن 3000يۈەنگىچە', maxPrice: 3000, minPrice: 2500 },
                { name: '3000至3500元', name_ug: '3000يۈەندىن 3500يۈەنگىچە', maxPrice: 3500, minPrice: 3000 },
                { name: '4000以上', name_ug: '4000يۈەندىن يۇقىرى', maxPrice: 99999999, minPrice: 4000 },
            ],
            selectedPrice: { name: '不限', name_ug: 'چەكلەنمەيدۇ', maxPrice: '', minPrice: '' },

            intoView: '',
            intoViewc: '',
            huxingList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },
                { name: '一室', name_ug: 'بىر ياتاق', val: 1 },
                { name: '两室', name_ug: 'ئىككى ياتاق', val: 2 },
                { name: '三室', name_ug: 'ئۈچ ياتاق', val: 3 },
                { name: '四室', name_ug: 'تۆت ياتاق', val: 4 },
                { name: '五室', name_ug: 'بەش ياتاق', val: 5 },
                { name: '六室', name_ug: 'ئالتە ياتاق', val: 6 },
                { name: '七室', name_ug: 'يەتتە ياتاق', val: 7 },
            ],
            bedroom: { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },

            pingFangList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' },
                { name: '50m²以下', name_ug: '50m²دىن تۆۋەن', minVal: 0, maxVal: 50 },
                { name: '50m²至70m²', name_ug: '50m²دىن 70m²گىچە', minVal: 50, maxVal: 70 },
                { name: '70m²至90m²', name_ug: '70m²دىن 90m²گىچە', minVal: 70, maxVal: 90 },
                { name: '90m²至110m²', name_ug: '90m²دىن 110m²گىچە', minVal: 90, maxVal: 110 },
                { name: '110m²至130m²', name_ug: '110m²دىن 130m²گىچە', minVal: 110, maxVal: 130 },
                { name: '130m²至150m²', name_ug: '130m²دىن 150m²گىچە', minVal: 130, maxVal: 150 },
                { name: '150m²至200m²', name_ug: '150m²دىن 200m²گىچە', minVal: 150, maxVal: 200 },
                { name: '200m²至300m²', name_ug: '200m²دىن 300m²گىچە', minVal: 200, maxVal: 300 },
                { name: '300m²至500m²', name_ug: '300m²دىن 500m²گىچە', minVal: 300, maxVal: 500 },
                { name: '500m²以上', name_ug: '500m²دىن يۇقىرى', minVal: 500, maxVal: 99999999 },
            ],
            pingFang: { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' },

            toiletList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },
                { name: '一卫', name_ug: 'بىر ھاجەتخانا', val: 1 },
                { name: '两卫', name_ug: 'ئىككى ھاجەتخانا', val: 2 },
                { name: '三卫', name_ug: 'ئۈچ ھاجەتخانا', val: 3 },
            ],
            toiletObj: { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },

            fangXiangList: [
                { label: this.$t('buxian'), val: '' },
                { label: this.$t('dong'), val: 1 },
                { label: this.$t('nan'), val: 2 },
                { label: this.$t('xi'), val: 3 },
                { label: this.$t('bei'), val: 4 },
                { label: this.$t('dongxi'), val: 5 },
                { label: this.$t('nanbei'), val: 6 },
                { label: this.$t('dongnan'), val: 7 },
                { label: this.$t('xinan'), val: 8 },
                { label: this.$t('dongbei'), val: 9 },
                { label: this.$t('xibei'), val: 10 },
            ],
            direction: { label: this.$t('buxian'), val: '' },

            zhuangXiuList: [
                { label: this.$t('buxian'), val: '' },
                { label: this.$t('maopi'), val: 1 },
                { label: this.$t('jiandanzhuangxiu'), val: 2 },
                { label: this.$t('jingzhuangxiu'), val: 3 },
                { label: this.$t('haohuazhungxiu'), val: 4 },
            ],
            fitment: { label: this.$t('buxian'), val: '' },

            // 首付
            shouFuList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', maxVal: '', minVal: '' },
                { name: '0首付', name_ug: 'ئالدىن تۆلەيدىغان پۇلى 0', maxVal: 0, minVal: 0 },
                { name: '5千以下', name_ug: '5مىڭدىن تۆۋەن', maxVal: 5000, minVal: 0 },
                { name: '5千至1.5万', name_ug: '5مىڭدىن 15مىڭغىچە', maxVal: 15000, minVal: 5000 },
                { name: '1.5万至3万', name_ug: '15مىڭدىن 30مىڭچىغە', maxVal: 30000, minVal: 15000 },
                { name: '3万至5万', name_ug: '30مىڭدىن 50مىڭغىچە', maxVal: 50000, minVal: 30000 },
                { name: '5万至7.5万', name_ug: '50مىڭدىن 75مىڭغىچە', maxVal: 75000, minVal: 50000 },
                { name: '7.5万至10万', name_ug: '75مىڭدىن 100مىڭغىچە', maxVal: 100000, minVal: 75000 },
                { name: '10万至15万', name_ug: '100مىڭدىن 150مىڭغىچە', maxVal: 150000, minVal: 100000 },
                { name: '15万至20万', name_ug: '150مىڭدىن 200مىڭغىچە', maxVal: 200000, minVal: 150000 },
                { name: '20万至25万', name_ug: '200مىڭدىن 250مىڭغىچە', maxVal: 250000, minVal: 200000 },
                { name: '25万至30万', name_ug: '250مىڭدىن 300مىڭغىچە', maxVal: 300000, minVal: 250000 },
                { name: '30万至50万', name_ug: '300مىڭدىن 500مىڭغىچە', maxVal: 500000, minVal: 300000 },
                { name: '50万以上', name_ug: '500مىڭدىن يۇقىرى', maxVal: 99999999, minVal: 500000 },
            ],
            advance_payment: { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' },

            // 层
            layer_levelList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },
                { name: '底楼层', name_ug: 'تۆۋەن قەۋەت', val: 1 },
                { name: '中楼层', name_ug: 'ئوتتۇرا قەۋەت', val: 2 },
                { name: '高楼层', name_ug: 'يۇقىرى قەۋەت', val: 3 },
            ],
            layer_level: { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' },

            // 佣金
            commissionList: [
                { name: '不限', name_ug: 'چەكلەنمەيدۇ', maxVal: '', minVal: '' },
                { name: '低于1%', name_ug: '1%دىن تۆۋەن', maxVal: 1, minVal: 0 },
                { name: '1%至2%', name_ug: '1%دىن %2كىچە', maxVal: 2, minVal: 1 },
                { name: '2%至3%', name_ug: '2%دىن %3كىچە', maxVal: 3, minVal: 2 },
                { name: '3%至4%', name_ug: '3%دىن %4كىچە', maxVal: 4, minVal: 3 },
                { name: '4%至5%', name_ug: '4%دىن %5كىچە', maxVal: 5, minVal: 4 },
            ],
            commission: { name: '不限', name_ug: 'چەكلەنمەيدۇ', maxVal: '', minVal: '' },

            current_page: 1,
            last_page: 1,
            typeId: 1,
            kw: '',
            inputDir: 'ltr',
            disList: [],
            townList: [],
        }
    },
    computed: {
        headerArea() {
            let area = uni.getSystemInfoSync()
            // #ifdef MP-WEIXIN
            let menu = uni.getMenuButtonBoundingClientRect()

            console.log('area:', area)
            console.log('menu:', menu)

            return {
                status_height: area.statusBarHeight,
                title_height: menu.height + (menu.top - area.statusBarHeight) * 2,
                menuLeft: menu.left,
                menuTop: menu.top - (menu.top - area.statusBarHeight),
            }
            // #endif
            // #ifndef MP-WEIXIN
            return {
                status_height: area.statusBarHeight,
                title_height: uni.upx2px(82),
                menuLeft: 0,
                menuTop: uni.upx2px(88),
            }
            // #endif
        },
    },
    onLoad(e) {
        this.type = e.type
        this.typeId = e.id
        this.sellHouse()
    },
    onShow() {
        let location = uni.getStorageSync('location')
        if (location) {
            this.selectedRegion = location
            if (this.filterActive == 3) this.filterClick(3)
        }
    },
    onPullDownRefresh() {
        uni.stopPullDownRefresh()
    },
    onReachBottom() {
        if (this.current_page < this.last_page) {
            this.current_page += 1
            this.sellHouse()
        }
    },
    methods: {
        filterClick(index) {
            this.filterShow = true
            this.filterActive = index
            if (index == 3 && this.disList.length == 0) {
                if (this.selectedRegion && this.selectedRegion.code) {
                    this.getCity(this.selectedRegion.code, 0)
                }
            }
        },
        getCity(code, index) {
            let data = { code: code }
            if (index == 0) this.disLoading = true
            else if (index == 1) this.townLoading = true
            this.$uniapi('/city', data)
                .then((res) => {
                    this.disLoading = false
                    this.townLoading = false
                    if (res.code == 0) {
                        if (index == 0) {
                            this.disList = res.data
                        } else if (index == 1) {
                            this.townList = res.data
                        }
                    }
                })
                .catch((err) => {
                    this.disLoading = false
                    this.townLoading = false
                })
        },
        disClick(item) {
            this.disObj = item
            this.townCodes = []
            this.selectedRegion.villages = []
            this.getCity(item.code, 1)
        },
        townClick(item) {
            if (this.townCodes.includes(item.code)) {
                this.townCodes.splice(this.townCodes.indexOf(item.code), 1)
            } else {
                this.townCodes.push(item.code)
            }
            console.log('this.townCodes:', this.townCodes)
        },
        //职业分类-》 点击左边的栏目切换
        async swichMenu(item) {
            if (item.id == this.categorySelected.id) return
            this.categorySelected = item
            this.intoView = 'intoView' + item.id
        },
        async swichMenu1(item) {
            if (item.id == this.categorySelected1.id) return
            this.categorySelected1 = item
            this.intoViewc = 'intoViewc' + item.id
        },
        kwClear() {
            this.current_page = 1
            this.sellHouse()
        },
        _search() {
            this.selectedRegion.region = this.disObj.code
            this.selectedRegion.villages = this.townCodes
            this.filterShow = false
            this.kwClear()
        },
        _clear() {
            this.selectedPrice = { name: '不限', name_ug: 'چەكلەنمەيدۇ', maxPrice: '', minPrice: '' }
            this.bedroom = { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' }
            this.direction = { label: this.$t('buxian'), val: '' }
            this.fitment = { label: this.$t('buxian'), val: '' }
            this.nianLingObj = { label: this.$t('buxian'), minVal: '', maxVal: '' }
            this.selectedRegion.region = ''
            this.selectedRegion.village = ''
            this.selectedRegion.villages = []
            this.disObj = { code: '' }
            this.townCodes = []
            this.townList = []
            this.kw = ''
            this.filterShow = false
            this.advance_payment = { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' }
            this.layer_level = { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' }
            this.commission = { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' }
            this.pingFang = { name: '不限', name_ug: 'چەكلەنمەيدۇ', minVal: '', maxVal: '' }
            this.houseTypeObj = { label: this.$t('buxian'), val: '' }
            this.toiletObj = { name: '不限', name_ug: 'چەكلەنمەيدۇ', val: '' }
            this.kwClear()
        },

        sellHouse() {
            console.log('this.nianLingObj:', this.nianLingObj)

            let data = {
                page: this.current_page,
                type: this.typeId,
                maxPrice: this.selectedPrice.maxPrice,
                minPrice: this.selectedPrice.minPrice,
                bedroom: this.bedroom.val,
                direction: this.direction.val,
                fitment: this.fitment.val,
                minYear: this.nianLingObj.minVal,
                maxYear: this.nianLingObj.maxVal,
                province: this.selectedRegion.parent_code,
                city: this.selectedRegion.city,
                region: this.selectedRegion.region,
                // village: this.selectedRegion.village,
                villages: '',
                kw: this.kw,
                max_advance_payment: this.advance_payment.maxVal,
                min_advance_payment: this.advance_payment.minVal,
                layer_level: this.layer_level.val,
                max_commission: this.commission.maxVal,
                min_commission: this.commission.minVal,
                min_square: this.pingFang.minVal,
                max_square: this.pingFang.maxVal,
                house_state: this.houseTypeObj.val,
                toilet: this.toiletObj.val,
            }
            let villages = ''
            if (this.selectedRegion.villages && this.selectedRegion.villages.length > 0) {
                for (var i in this.selectedRegion.villages) {
                    let item = this.selectedRegion.villages[i]
                    villages += item
                    if (i != this.selectedRegion.villages.length - 1) villages += ','
                }
            }
            data.villages = villages
            this.loadmoreStatus = 'loading'

            let api = '/sellHouse'
            if (this.type == 'zufang') api = '/rentHouse'
            this.$uniapi(api, data)
                .then((res) => {
                    this.loadmoreStatus = 'loadmore'
                    if (res.code == 0) {
                        let d = res.data
                        if (this.current_page == 1) this.houses = d.data
                        else this.houses.push(...d.data)
                        this.current_page = d.current_page
                        this.last_page = d.last_page
                        if (d.current_page == d.last_page) this.loadmoreStatus = 'nomore'
                    }
                })
                .catch((err) => {
                    this.loadmoreStatus = 'loadmore'
                })
        },

        // 输入监听
        handleInput(event) {
            const str = event
            this.inputDir = this.$tools.strDir(str) //方向
        },
    },
}
</script>
<style lang="scss">
.cate-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    height: 56vh;

    .u-tab-view {
        width: 30%;
        height: 100%;
        // background-color: #f0f0f0;
        // padding: 20px 0;
        border-right: 1px solid #f0f0f0;
    }
    .rtl.u-tab-view {
        border-left: 1px solid #f0f0f0 !important;
        border-right: unset !important;
    }

    .u-tab-item {
        height: 42px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #444;
        font-weight: 400;
        line-height: 1;
        padding: 0 10px;
    }

    .u-tab-item-active {
        position: relative;
        color: var(--app-color);
        background: #fff;
    }

    .u-tab-item-active::before {
        content: '';
        position: absolute;
        border-left: 4px solid var(--app-color);
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 30px;
    }

    .rtl .u-tab-item-active::before {
        border-right: 4px solid var(--app-color) !important;
        right: 0 !important;
        left: auto !important;
        border-left: none !important;
    }

    .goods-container {
        flex: 1;
        background-color: white;
    }
}

.child-cate-bg {
    background: rgb(238, 238, 238);
    color: #444;
}

.active-carrer {
    background: #eafaff;
}
</style>
